<template>
  <div>
    <!-- 此处放置你的页面内容 -->
    <div v-for="item in items" :key="item.id">{{ item.name }}</div>

    <!-- 使用 vue-infinite-loading 来加载更多数据 -->
    <infinite-loading :identifier="infiniteId" @infinite="loadMoreData">
      <div slot="no-more">没有更多数据了</div>
    </infinite-loading>
  </div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading';
import sampleData from '@/views/config/sampleData2.json'

export default {
  components: {
    InfiniteLoading,
  },
  data() {
    return {
      items: [],
      currentPage: 1,
      pageSize: 10,
      infiniteId: +new Date(),
    };
  },
  methods: {
    // 加载更多数据的方法
    loadMoreData($state) {
      // 模拟异步加载数据
      setTimeout(() => {
        // const newData =  从服务器或其他数据源获取数据 ;
        const newData = sampleData;
        this.items = this.items.concat(newData);

        // 如果已加载完所有数据，触发 vue-infinite-loading 的 no-more 事件
        if (newData.length < this.pageSize) {
          $state.complete();
        } else {
          $state.loaded();
        }
      }, 1000); // 模拟加载延迟
    },
  },
};
</script>
